用原生js来处理跨域的数据（jsonp）

您所在的位置：网站首页 › jquery 跨域 › 用原生js来处理跨域的数据（jsonp）

用原生js来处理跨域的数据（jsonp）

2023-04-01 01:48| 来源: 网络整理| 查看: 265

说明总结：

1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。

2.但是ajax和jsonp在数据传输的过程中都是可以用json格式的数据。

3.其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4.ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

服务器端代码：

//获取客户端的信息 if (isset($_GET['code'])) { if ($_GET['code'] == "CA1998") { $flightId = $_GET['code']; $price = 1000; } else if ($_GET['code'] == "CA1997") { $flightId = $_GET['code']; $price = 2000; } else{ $flightId = 0; $price = 0; } $flightHandler = array('flightId'=>$flightId,'price'=>$price); $flightHandler = json_encode($flightHandler); 17 $flightHandler = "flightHandler(".$flightHandler .");";// 将数据进行了包装，包装成了一个调用的函数，这一步很重要。 print_r($flightHandler); }

获取到的服务器数据：

flightHandler({ "flightId": "CA1998", "price": 2000 });5 //其实就在服务器端把json数据包装成了一个js的函数，将一个对象作为参数放在函数里面。所以跟ajax用XMLHttpRequest接收数据是不一样的。

传统ajax获取到的json数据：

{ "flightId": "CA1998", "price": 2000 }

客户端代码：

XHR 输入：CA1998 或者 CA1997 // 得到航班信息查询结果后的回调函数 function flightHandler(data){ if (data.price != 0) { alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '航班 ' + data.flightId ); } else{ alert("EORROR"); }; }; function flightHandler0(){ var flightId = document.getElementById('flightId').value; //供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） //其实参数都是前端和后台程序员规定的，前端传过去，后端判断获取即可。 var url = "flightResult.php?code=" + flightId +"&callback=flightHandler"; // 创建script标签，设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head，此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); };

设想：

上面的方法是在服务器端把json数据包装在回调函数里面，那能不能在客户端来做这个事情呢？但是试了一下感觉行不通。

在服务器端把

$flightHandler = "flightHandler(".$flightHandler .");";

去掉。

留言中有用jquery写的jsonp的例子。

最后附上用原生js和jquery分别处理jsonp的例子：

js：http://snowinmay.net/ajax/xhr-js-jsonp.html

jsonp：http://snowinmay.net/ajax/xhr-jquery-jsonp.html

所以返回数据应该是json数据，但是在客户端好像没有很好的办法来包装这个数据。如果有的话以后再补充。

用原生js来处理跨域的数据（jsonp）的更多相关文章原生js实现ajax跨域(兼容IE8,IE9)

html设置meta标签兼容360兼容模式和IE怪异模式

【本文地址】

用原生js来处理跨域的数据（jsonp）

用原生js来处理跨域的数据（jsonp）

今日新闻

推荐新闻